<template>
  <div class="select-class">
    <el-select v-model="selected" placeholder="请选择" v-bind="$attrs" v-on="$listeners"
      :clearable="$attrs.clearable || false" :popper-append-to-body="false">
      <el-option v-for="item in options" :key="item[defaultProp.value]" :label="item[defaultProp.label]"
        :value="item[defaultProp.value]">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    },
    defaultProp: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value"
        };
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selected = val;
      },
      immediate: true
    }
  },
  data() {
    return {
      selected: ""
    };
  }
};
</script>
<style lang="less" scoped>
.select-class {
  .el-select {
    width: 100px;

    :deep(.el-input) {
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        background-color: transparent;
        color: #FFFFFF;
        border: 1px solid #73849f;

      }

      .el-input__icon {
        line-height: 30px;
      }
    }

    :deep(.el-select-dropdown) {
      background-color: rgba(30, 66, 141, 0.80);
      border: 1px solid #73849f;
      left: 0 !important;

      .el-scrollbar__wrap::-webkit-scrollbar-track {
        background-color: transparent;
      }

      .el-select-dropdown__item {
        color: #FFFFFF;
        position: relative;
      }

      // .el-select-dropdown__item::before {
      //   position: absolute;
      //   width: 100%;
      //   bottom: 0;
      //   display: flex;
      //   border-bottom: 1px solid #628bdf;
      //   transform: scaleY(0.5);
      //   content: '';
      // }

      .hover {
        background: #2269FF;
      }

      .popper__arrow {
        border-top-color: rgba(30, 66, 141, 0.80);
        border-bottom-color: rgba(30, 66, 141, 0.80);
        left: 50% !important;
      }

      .popper__arrow::after {
        border-top-color: rgba(30, 66, 141, 0.80);
        border-bottom-color: rgba(30, 66, 141, 0.80);
        left: 50% !important;
      }
    }
  }
}
</style>
